<!--
    * Time    : 2021-02-05 09:13:24
    * Author  : zhangTj
    * Desc    : 专属客服
-->

<template>
    <div class="bg-f8 h-100vh">
        <div>
            <div class="bg-main flex-center flex-column" style="height: 360px">
                <div style="height: 200px; width: 200px">
                    <img
                        :src="serviceData.employeeWechatCode ? $imgUrlHead + serviceData.employeeWechatCode : require('@/assets/images/empty-bg.png')"
                        class="w-100 h-100"
                        alt=""
                    />
                </div>
                <div class="text-fff mt-2 font-14">
                    <span>{{ serviceData.employeeWechatCode ? '长按二维码添加客服微信' : '客服暂时走开了，请稍等~' }}</span>
                </div>
            </div>
            <div class="px-2 position-relative w-100" style="top: -40px">
                <div class="rounded-15 font-14 bg-fff p-2">
                    <div class="d-flex py-2">
                        <span style="width: 75px" class="text-999">客服姓名</span>
                        <span class="flex-1">{{ serviceData.realName || '暂无' }}</span>
                    </div>
                    <div class="d-flex py-2">
                        <span style="width: 75px" class="text-999">联系电话</span>
                        <span class="flex-1">{{ serviceData.phone || '暂无' }}</span>
                    </div>
                    <div class="d-flex py-2">
                        <span style="width: 75px" class="text-999">微信号</span>
                        <span class="flex-1">{{ serviceData.employeeWechatNum || '暂无' }}</span>
                        <div
                            class="font-12 rounded-5 border"
                            style="padding: 3px 6px"
                            v-clipboard:copy="serviceData.employeeWechatNum"
                            v-clipboard:success="onCopy"
                            v-clipboard:error="onError"
                        >
                            <span>复制</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getDedicatedService } from '@/api/my'

export default {
    name: '',
    components: {},
    data() {
        return {
            serviceData: '', // 专属客服对象
            loading: true
        }
    },
    computed: {},
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        this.getData()
    },
    methods: {
        // 获取数据
        getData() {
            getDedicatedService()
                .then((res) => {
                    if (!res.success) {
                        this.$toast(res.msg)
                        return
                    }
                    this.serviceData = res.result
                })
                .catch((err) => {
                })
        },

        onCopy() {
            this.$toast.success({
                message: '复制成功',
                duration: 1000
            })
        },
        onError() {
            this.$toast.fail({
                message: '内复制失败',
                duration: 1000
            })
        }
    }
}
</script>

<style lang="scss" scoped></style>
